<div class="header">
	<div class="content">
		<div class="collection">
			<a href="#"><img src="img/star.png">收藏非凡商城</a>
		</div>
		<div class="welcome">
			<span>欢迎来到非凡商城</span>
			<a href="#">[登陆]</a>
			<a href="#">[注册]</a>
		</div>
	</div>
</div>
<div class="header-logo">
	<div class="content">
		<div class="logo"><img src="img/logo.png" height="36px"></div>
		<div class="search">
			<input type="text" name="search" id="search" />
			<input type="button" value="搜索" name="search" id="btn" />
		</div>
		<div class="shoppingcart">
			<a href="#">购物车(0)</a>
		</div>
	</div>
</div>
<div class="nav">
	<div class="content">
		<ul class="menu">
			<li><a href="#">数码城</a></li>
			<li><a href="#">天黑黑</a></li>
			<li><a href="#">团购</a></li>
			<li><a href="#">二手特卖</a></li>
			<li><a href="#">发现</a></li>
			<li><a href="#">名品会</a></li>
		</ul>
		<div class="sub-nav">
			<div class="main">全部产品分类
				<img src="img/arrow.png">
			</div>
			<ul class="all">
				<li>
					<!--<img class="arrow" src="img/arrow-right.png">-->
					<p><a href="#">手机  数码</a></p>
					<p><a href="#">单反</a>&nbsp;&nbsp;<a href="#">智能设备</a></p>
					<div class="fenxiang">
						<div class="fenxiang-digital">
							<div class="leiming"><a href="#">电脑整机</a></div>
							<div class="title">
								<span class="jvti"><a href="#">笔记本</a></span>
								<span class="jvti"><a href="#">超级本</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
							</div>
						</div>

						<div class="fenxiang-digital">
							<div class="leiming"><a href="#">电脑整机</a></div>
							<div class="title">
								<span class="jvti"><a href="#">笔记本</a></span>
								<span class="jvti"><a href="#">超级本</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
							</div>
						</div>

						<div class="fenxiang-digital">
							<div class="leiming"><a href="#">电脑整机</a></div>
							<div class="title">
								<span class="jvti"><a href="#">笔记本</a></span>
								<span class="jvti"><a href="#">超级本</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
							</div>
						</div>

						<div class="fenxiang-digital">
							<div class="leiming"><a href="#">电脑整机</a></div>
							<div class="title">
								<span class="jvti"><a href="#">笔记本</a></span>
								<span class="jvti"><a href="#">超级本</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
							</div>
						</div>

						<div class="fenxiang-digital">
							<div class="leiming"><a href="#">电脑整机</a></div>
							<div class="title">
								<span class="jvti"><a href="#">笔记本</a></span>
								<span class="jvti"><a href="#">超级本</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
								<span class="jvti"><a href="#">平板电脑</a></span>
							</div>
						</div>

						<div class="fenxiang-digital">
							<div class="leiming1">
								<a href="#">电脑整机频道<img src="img/arrow-right.png"/></a>
							</div>
							<div class="leiming2">
								<a href="#">硬件/外设频道<img src="img/arrow-right.png"/></a>
							</div>
						</div>
					</div>
				</li>
				<li>
					<!--<img class="arrow" src="img/arrow-right.png">-->
					<p><a href="#">电脑&nbsp;&nbsp;硬件外设</a></p>
					<p><a href="#">笔记本</a>&nbsp;&nbsp;<a href="#">台式机</a></p>
					<div class="fenxiang">电脑&nbsp;&nbsp;硬件外设</div>
				</li>
				<li>
					<!--<img class="arrow" src="img/arrow-right.png">-->
					<p><a href="#">大家电</a></p>
					<p><a href="#">电视</a>&nbsp;&nbsp;<a href="#">空调</a>&nbsp;&nbsp;<a href="#">冰箱</a></p>
					<div class="fenxiang">大家电</div>
				</li>
				<li>
					<!--<img class="arrow" src="img/arrow-right.png">-->
					<p><a href="#">厨房电器&nbsp;&nbsp;生活电器</a></p>
					<p><a href="#">空气净化器</a>&nbsp;&nbsp;<a href="#">微波炉</a></p>
					<div class="fenxiang">厨房电器&nbsp;&nbsp;生活电器</div>
				</li>
				<li>
					<!--<img class="arrow" src="img/arrow-right.png">-->
					<p><a href="#">食品/饮料/生鲜</a></p>
					<p><a href="#">进口</a><a href="#">方便面</a>&nbsp;&nbsp;<a href="#">零食</a></p>
					<div class="fenxiang">食品/饮料/生鲜</div>
				</li>
			</ul>
			<img class="img" id="img1" src="img/arrow-right.png">
			<img class="img" id="img2" src="img/arrow-right.png">
			<img class="img" id="img3" src="img/arrow-right.png">
			<img class="img" id="img4" src="img/arrow-right.png">
			<img class="img" id="img5" src="img/arrow-right.png">

		</div>
		
	</div>
</div>

<script type="text/javascript" src="js/jQueryRotate.js" ></script>
<script type="text/javascript">
	var t = 0;
	$(".sub-nav .main").click(function(){
		$(".sub-nav .all,.sub-nav .img").slideToggle(300);
		$(".sub-nav .main img").rotate({
			angle: t,
			animateTo: t - 180,
			duration: 500,
			callback:function(){
				t = t == -180 ? 0:-180;
			}
			});
		});
	
</script>